<template>
  <!-- 盲板抽堵作业票申请 -->
  <view>
    <view class="form-container">
      <uni-forms ref="form" :modelValue="ticketForm" :rules="rules" labelPosition="top" labelWidth="180px">
        <view class="hidden-title">信息填写</view>

        <cu-cell-group>
          <uni-forms-item name="equipmentPipeName">
            <cu-cell title="设备管道名称" column required>
              <uni-easyinput
                type="textarea"
                v-model="ticketForm.equipmentPipeName"
                placeholder="根据实际情况填写(限20字)"
                maxlength="20"
              />
            </cu-cell>
          </uni-forms-item>

          <uni-forms-item name="medium">
            <cu-cell title="介质" column required>
              <uni-easyinput
                type="textarea"
                v-model="ticketForm.medium"
                placeholder="根据实际情况填写(限20字)"
                maxlength="20"
              />
            </cu-cell>
          </uni-forms-item>
        </cu-cell-group>

        <cu-cell-group class="bor-top">
          <uni-forms-item name="temperature">
            <cu-cell title="温度(℃)" required>
              <input
                type="number"
                v-model="ticketForm.temperature"
                placeholder="请输入"
                class="input"
                placeholder-class="form-placeholder__style"
                maxlength="20"
              />
            </cu-cell>
          </uni-forms-item>
          <uni-forms-item name="pressure">
            <cu-cell title="压力(Pa)" required>
              <input
                type="number"
                v-model="ticketForm.pressure"
                placeholder="请输入"
                class="input"
                placeholder-class="form-placeholder__style"
                maxlength="20"
              />
            </cu-cell>
          </uni-forms-item>
        </cu-cell-group>

        <cu-cell-group class="bor-top">
          <uni-forms-item name="material">
            <cu-cell title="盲板材质" column required>
              <uni-easyinput
                type="textarea"
                v-model="ticketForm.material"
                placeholder="请输入盲板材质(限20字)"
                maxlength="20"
              />
            </cu-cell>
          </uni-forms-item>

          <uni-forms-item name="serialNumber">
            <cu-cell title="盲板编号" column required>
              <uni-easyinput
                type="textarea"
                v-model="ticketForm.serialNumber"
                placeholder="请输入盲板编号(限50字)"
                maxlength="50"
              />
            </cu-cell>
          </uni-forms-item>
          <uni-forms-item name="specification">
            <cu-cell title="盲板规格" column required>
              <uni-easyinput
                type="textarea"
                v-model="ticketForm.specification"
                placeholder="请输入盲板规格(20字)"
                maxlength="20"
              />
            </cu-cell>
          </uni-forms-item>
          <uni-forms-item name="image">
            <cu-cell title="盲板位置图及编号" column required>
              <image-upload :imageUrl="ticketForm.image" state="edit" :limit="1" @change="imageOnChange"></image-upload>
            </cu-cell>
          </uni-forms-item>
        </cu-cell-group>

        <cu-cell-group class="bor-top">
          <uni-forms-item name="creator">
            <cu-cell
              title="编制人"
              required
              link
              placeholder="请选择"
              :description="ticketForm.creatorLabel"
              @click="showUserSelector()"
            ></cu-cell>
          </uni-forms-item>
          <uni-forms-item name="createTime">
            <uni-datetime-picker v-model.trim="ticketForm.createTime" type="date">
              <cu-cell
                title="编制时间"
                required
                link
                placeholder="请选择"
                :description="ticketForm.createTime"
              ></cu-cell>
            </uni-datetime-picker>
          </uni-forms-item>
        </cu-cell-group>

        <cu-cell-group class="bor-top">
          <uni-forms-item name="blandPlateTypeLabel">
            <cu-cell title="作业类别" required class="cu-cell--select-v2">
              <CuSelectV2
                v-model="ticketForm.blandPlateType"
                title="作业类别"
                placeholder="请选择"
                :options="blandPlateOptions"
                @change="onBlandPlateTypeChange"
              />
            </cu-cell>
          </uni-forms-item>
          <uni-forms-item name="startTime">
            <uni-datetime-picker
              hide-second
              :start="now"
              :end="endTime"
              type="datetime"
              @change="onTimeChange($event, 'startTime')"
            >
              <cu-cell
                title="计划开始时间"
                required
                link
                placeholder="请选择"
                :description="ticketForm.startTime"
              ></cu-cell>
            </uni-datetime-picker>
          </uni-forms-item>
          <uni-forms-item name="endTime">
            <uni-datetime-picker
              hide-second
              :start="startTime"
              type="datetime"
              @change="onTimeChange($event, 'endTime')"
            >
              <cu-cell
                title="计划结束时间"
                required
                link
                placeholder="请选择"
                :description="ticketForm.endTime"
              ></cu-cell>
            </uni-datetime-picker>
          </uni-forms-item>
          <uni-forms-item name="relateBlandPlateTicketCode">
            <cu-cell
              title="关联抽堵"
              link
              placeholder="请选择"
              :description="ticketForm.relateBlandPlateTicketCode"
              @click="showRelate()"
            ></cu-cell>
          </uni-forms-item>
        </cu-cell-group>
      </uni-forms>

      <!-- 用户选择器 v2 -->
      <cu-dept-user-select
        ref="deptUserSelectRef"
        :checkList="deptUserSelectProps.checkList"
        @change="onDeptUserChange"
      ></cu-dept-user-select>

      <!--关联抽堵-->
      <data-picker
        ref="relateRef"
        title="关联抽堵"
        label-key="ticketCode"
        value-key="ticketId"
        :data="relatedList"
        @confirm="relateConfirm"
      ></data-picker>
    </view>
  </view>
</template>

<script>
import CuCellGroup from '@/components/cu-cell/cu-cell-group.vue'
import CuCell from '@/components/cu-cell/cu-cell.vue'
import ImageUpload from '@/components/image-upload/index.vue'
import DataPicker from '@/components/data-picker/index.vue'
import dayjs from 'dayjs'
import { geBlindPlateRelated } from '../../../api/spw/ticketApply'
import CuDeptUserSelect from '@/components/cu-dept-user-select/cu-dept-user-select.vue'
import { cloneDeep } from 'lodash'
import CuSelectV2 from '@/components/cu-select-v2/cu-select-v2.vue'

export default {
  components: {
    CuSelectV2,
    CuDeptUserSelect,
    CuCellGroup,
    CuCell,
    ImageUpload,
    DataPicker
  },
  props: {
    ticketInfo: {
      type: Object,
      default: () => {}
    },
    templateId: {
      type: [String, Number],
      default: ''
    },
    unitType: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      blandPlateOptions: [
        {
          label: '抽盲板',
          value: '1'
        },
        {
          label: '堵盲板',
          value: '2'
        }
      ],
      deptUserSelectProps: {
        checkList: []
      },
      ticketForm: {
        blandPlateType: '',
        blandPlateTypeLabel: '',
        relateBlandPlateTicketId: '',
        relateBlandPlateTicketCode: '',
        startTime: '',
        endTime: '',
        equipmentPipeName: '', // 设备管道名称
        medium: '', // 介质
        temperature: '', // 温度
        pressure: '', // 压力
        material: '', // 材质
        specification: '', // 规格
        serialNumber: '', // 编号
        image: '', // 盲板位置图及编号
        creator: '', // 编制人
        creatorLabel: '', // 编制人名称
        createTime: '', // 编制时间
        workModality: []
      },
      selectUserType: 1,
      nodeIdx: '',
      result: {},
      staffs: [],
      relatedList: [],
      now: dayjs(new Date()).format('YYYY-MM-DD HH:mm'),
      rules: {
        equipmentPipeName: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        },
        medium: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        },
        temperature: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        },
        pressure: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        },
        material: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        },
        specification: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        },
        serialNumber: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        },
        image: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        },
        creator: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        },
        createTime: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        },
        startTime: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        },
        endTime: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        },
        blandPlateTypeLabel: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        }
      }
    }
  },
  computed: {
    endTime() {
      if (!this.ticketForm.endTime) {
        return ''
      }
      return dayjs(this.ticketForm.endTime).valueOf() - 60 * 60 * 1000
    },
    startTime() {
      if (!this.ticketForm.startTime) {
        return ''
      }
      return dayjs(this.ticketForm.startTime).valueOf() + 60 * 60 * 1000
    }
  },
  watch: {
    ticketInfo: {
      async handler(val) {
        if (val) {
          Object.keys(this.ticketInfo).map((k) => {
            this.ticketForm[k] = cloneDeep(this.ticketInfo[k])
          })
        }
      },
      immediate: true
    }
  },
  methods: {
    onDeptUserChange(val) {
      if (!val) {
        return
      }
      this.ticketForm.creator = val[0].userId
      this.ticketForm.creatorLabel = val[0].name
    },
    showUserSelector() {
      this.$refs.deptUserSelectRef.open()
    },

    onBlandPlateTypeChange(item) {
      this.ticketForm.blandPlateTypeLabel = item.label

      this.ticketForm.relateBlandPlateTicketId = ''
      this.ticketForm.relateBlandPlateTicketCode = ''
    },

    onTimeChange(val, key) {
      if (val.trim().includes(' ')) {
        this.ticketForm[key] = val.trim()
      } else {
        this.$modal.showToast('请选择日期和时间')
      }
    },

    showRelate() {
      if (!this.ticketForm.blandPlateType) {
        this.$modal.showToast('请选择作业类别后操作')
        return
      }
      this.$refs.relateRef.open()
      geBlindPlateRelated({
        pageNum: 1,
        pageSize: 100,
        blankPlateType: this.ticketForm.blandPlateType === '1' ? '2' : '1'
      }).then((res) => {
        this.relatedList = res.data
      })
    },

    relateConfirm(obj) {
      this.ticketForm.relateBlandPlateTicketId = obj.ticketId
      this.ticketForm.relateBlandPlateTicketCode = obj.ticketCode
    },

    imageOnChange(urlList) {
      this.ticketForm.image = urlList.join(',')
    },
    async submit() {
      await this.$refs.form.validate()

      this.ticketForm.workModality = [
        {
          blandPlateType: this.ticketForm.blandPlateType,
          blandPlateTypeLabel: this.ticketForm.blandPlateTypeLabel,
          start: this.ticketForm.startTime,
          end: this.ticketForm.endTime,
          relateBlandPlateTicketId: this.ticketForm.relateBlandPlateTicketId,
          relateBlandPlateTicketCode: this.ticketForm.relateBlandPlateTicketCode
        }
      ]
      this.result = {
        ...this.ticketForm,
        procDefId: this.procDefId,
        workType: this.ticketForm.specialWorkType,
        workId: this.ticketForm.workId
      }
      console.log('result', this.result)
    }
  }
}
</script>

<style lang="scss" scoped>
.button-wrap {
  padding: 100rpx 75rpx 160rpx;
  display: flex;
  .space {
    width: 50rpx;
  }
  .submit-button,
  .draft-button {
    flex: 1;
    color: #ffffff;
    line-height: 88rpx;
    text-align: center;
    border-radius: 50rpx;
    font-size: 36rpx;
  }
  .submit-button {
    background: #454a5e;
  }

  .draft-button {
    background: #c4c088;
  }
}
.other-type {
  background: #f5f5f5;
  padding: 20rpx;
  margin-top: 10rpx;
  .input {
    text-align: left;
  }
}
</style>
